import { Component, ElementRef, OnInit, ɵɵpipeBind1 } from '@angular/core';
import { PlayLppService } from '../play-lpp.service';
@Component({
  selector: 'app-font-img',
  templateUrl: './font-img.component.html',
  styleUrls: ['./font-img.component.scss']
})
export class FontImgComponent implements OnInit {
  switchValue: boolean=false;
  switchValue1: boolean=false;
  opener?: HTMLElement;
  a: boolean = false;
  b: boolean = false;
  c?: boolean ;
  cont1!: HTMLElement;
  cont2!: HTMLElement;
  suiji:boolean = true;
  suiji_btn = document.getElementById('panel_1');
  value1 ?:number;
  value2 ?:number;
  value3 ?:number;
  value4 ?:number;
  demoValue = 3;
  textareaString = ""
  gets_tring:any[]=[];
  nzMarks1 = {
    1: '1',
    2: '2',
    3: '3',
    4: '4',
  }
  nzMarks = {
    
    1: '1',
    5: '5',
    10: '10',
    15: '15',
    20: '20',

  };
  options_cyq = [
    { value: 'option1', label: 'Euler A' },
    { value: 'option2', label: 'Euler' },
    { value: 'option3', label: 'Ddim' },
    { value: 'option3', label: 'Ddim 2 M' },
    { value: 'option3', label: 'Ddim 2 M Karras' },
    { value: 'option3', label: 'Dpm Sde' },
    { value: 'option3', label: 'Dpm Sde Karras' },
  ];


  selectedOption: string = '';

  onOptionChange(value: string) {
    this.selectedOption = value;
  }

  constructor(private elementRef: ElementRef,public lppServ : PlayLppService ) {

  }  
  ngOnInit() {
    this.cont1 = this.elementRef.nativeElement.querySelector('.cont_2') as HTMLElement;
    this.cont2 = this.elementRef.nativeElement.querySelector('.Section_2-5') as HTMLElement;
    this.lppServ.choose()
  }

  move(x: boolean) {
    this.c = x;
  
    const Section_3 = document.getElementsByClassName('Section_3')[0];
  
    if (x === false) { 
      Section_3.id = 'id002';
    } else {
      Section_3.id = 'id001';
    }

    this.open()
  }

  open() {
    opener = document.getElementById('id001');
    if(opener){
      if (this.a === false) {
        opener.classList.add('Section_555');
        // opener.style.removeProperty('overflow');
        opener.style.height = '750px';
        this.a = !this.a;
      } else {
        opener.classList.remove('Section_555');
        // opener.style.overflow = 'hidden';
        opener.style.height = "20px";
        this.a = !this.a;
      }
    }else{
    opener = document.getElementById('id002');
    if (this.a === false) {
      opener.classList.add('Section_555');
      // opener.style.removeProperty('overflow');
      opener.style.height = '220px';
      this.a = !this.a;

    } else {
      opener.classList.remove('Section_555');
      // opener.style.overflow = 'hidden';
      opener.style.height = "20px";
      this.a = !this.a;

    }
    }

    // console.log(this.a);
  }
  clicksuiji() {
    const dui = document.getElementById('dui');
  
    if (dui !== null) { // 检查元素是否存在
      this.suiji = !this.suiji;
      if (this.suiji === false) {
        dui.style.backgroundColor = "#ffffff";
      }else{
        dui.style.backgroundColor = "#2334ce";
      }
    }
  }
  getString(){
    // const firstString = document.getElementById("textarea") as HTMLInputElement;
    // console.log("创意相关性"+this.value4);
    // console.log("生成张数"+this.value1);
    // console.log("采样步骤"+this.value2);
    // console.log("生成批次"+this.value3);
    // console.log("面部修复"+this.switchValue);
    // console.log("高清修复"+this.switchValue1);
    
    // if (firstString) {
    //   this.textareaString = firstString.value
    //   console.log(this.textareaString);

    // }
    const word_Object = {
      V1:this.value1,
      V2:this.value2,
      V3:this.value3,
      V4:this.value4,
      B1:this.switchValue,
      B2:this.switchValue1,
      S1:this.textareaString,
      // S2:
    };
    this.gets_tring.push(word_Object)
     console.log(this.gets_tring);
     
  }
  
}
